<template>
  <div class="app-container">
    <div class="page-header">
      <!-- <router-link class="back-link" to="/main/renshi/renshizhidu/ygwaichufxd/ygwaichufxd">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link> -->
      <el-button
        type="primary"
        style="margin-right: 20px"
        @click="
          $router.push('/main/renshi/renshizhidu/ygwaichufxd/ygwaichufxd')
        "
        icon="el-icon-back"
        >返回</el-button
      >
      <h2>员工外出放行单列表</h2>
    </div>
    <!-- 搜索区域 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.holderName"
        placeholder="持单人姓名"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.employeeNumber"
        placeholder="工号"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        新增
      </el-button>
      <el-button
        class="filter-item"
        type="danger"
        icon="el-icon-delete"
        @click="handleBatchDelete"
      >
        批量删除
      </el-button>
      <!-- <el-button @click="goBack" icon="el-icon-back">返回</el-button> -->
    </div>

    <!-- 表格区域 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="编号" prop="passNumber" />
      <el-table-column label="持单人姓名" prop="holderName" />
      <el-table-column label="工号" prop="employeeNumber" />
      <el-table-column label="部门" prop="department" />
      <el-table-column
        label="外出日期"
        prop="passDate"
        :formatter="formatDate"
      />
      <el-table-column
        label="开始时间"
        prop="startTime"
        :formatter="formatDateTime"
        width="200"
      />
      <el-table-column
        label="结束时间"
        prop="endTime"
        :formatter="formatDateTime"
        width="200"
      />
      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleView(row)">
            查看
          </el-button>
          <el-button type="success" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  getEmployeeOutpassPage,
  deleteEmployeeOutpass,
} from "@/api/employeeOutpass";
import Pagination from "@/components/Pagination";

export default {
  name: "EmployeeOutpassList",
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        holderName: undefined,
        employeeNumber: undefined,
      },
      selectedRows: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    goBack() {
      this.$router.push("/main/renshi/renshizhidu");
    },
    getList() {
      this.listLoading = true;
      getEmployeeOutpassPage(this.listQuery).then((response) => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    handleCreate() {
      this.$router.push("/main/renshi/renshizhidu/ygwaichufxd/ygwaichufxd");
    },
    handleView(row) {
      this.$router.push({
        path: "/main/renshi/renshizhidu/ygwaichufxd/ygwaichufxd",
        query: { id: row.id, type: "view" },
      });
    },
    handleUpdate(row) {
      this.$router.push({
        path: "/main/renshi/renshizhidu/ygwaichufxd/ygwaichufxd",
        query: { id: row.id, type: "edit" },
      });
    },
    handleDelete(row) {
      this.$confirm("确认删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteEmployeeOutpass([row.id]).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
      });
    },
    handleBatchDelete() {
      if (this.selectedRows.length === 0) {
        this.$message({
          message: "请选择要删除的记录",
          type: "warning",
        });
        return;
      }
      this.$confirm("确认删除选中的记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const ids = this.selectedRows.map((row) => row.id);
        deleteEmployeeOutpass(ids).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
      });
    },
    formatDate(row, column) {
      const date = row[column.property];
      if (date) {
        return date; // 后端已经格式化为 yyyy-MM-dd
      }
      return "";
    },
    formatDateTime(row, column) {
      const datetime = row[column.property];
      if (datetime) {
        return datetime; // 后端已经格式化为 yyyy-MM-dd HH:mm:ss
      }
      return "";
    },
  },
};
</script>

<style scoped>
/* 容器样式 */
.app-container {
  padding: 20px;
  /* background-color: #f5f7fa; */
  border-radius: 8px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  min-height: calc(100vh - 40px);
  width: 1200px;
  margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 0px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 返回链接样式 */
.back-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #409eff;
  font-size: 16px;
  margin-right: 20px;
  transition: all 0.3s;
}

.back-link i {
  margin-right: 5px;
}

.back-link:hover {
  opacity: 0.8;
}

/* 标题样式 */
.page-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: #303133;
}

.filter-container {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px 0px;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
}

.filter-item {
  margin-right: 10px;
}

/* 按钮样式 */
.el-button {
  border-radius: 4px;
  padding: 8px 13px;
  font-family: "宋体";
  font-size: 1em;
}
</style>